import React from 'react'
import { ResultPage, Card } from 'antd-mobile'
import { Button, Space } from 'antd-mobile'
import { useSelector, useDispatch } from "react-redux";
import { LoopOutline } from 'antd-mobile-icons'
import style from './home.module.css'
import { useNavigate } from 'react-router-dom';
function Index() {
    const start = useSelector((store) => store.counter.start);
    const end = useSelector((store) => store.counter.end);
    const nav=useNavigate()
    return (
        <div>
            <ResultPage
                status=''
                title=''
                description=''
            >
                <ResultPage.Card style={{ padding: 8 }}>
                    <div className={style.row}>
                        <span className={style.pp}>{start}</span>
                        <LoopOutline fontSize={28} />
                        <span className={style.pp}>{end}</span>
                    </div>
                    <div className={style.row}>
                        <Button block color='primary' size='middle'
                         onClick={()=>nav(`/list?start=${start}&end=${end}`)}>
                            查询
                        </Button>
                    </div>
                </ResultPage.Card>

                <Card style={{ height: 128, marginTop: 12 }}>搭配 Card 使用</Card>
            </ResultPage>
        </div>
    )
}

export default Index
